<script>
  import EChart from '@comp/echart/EChart'

  export default {
    // 面积图
    name: 'AreaChart',
    extends: EChart,
    props: {
      // {x:'xxx',y:111}
      dataSource: {
        type: Array,
        default: () => []
      },
      color: {
        type: String,
        default: '#74BCFF'
      },
      unit: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        option: {
          animationDuration: 0,
          animationDurationUpdate: 800,
          animationEasing: 'linear',
          animationEasingUpdate: 'quadraticOut',
          xAxis: {
            type: 'category',
            boundaryGap: false,
            color: this.color,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line',
              areaStyle: { color: this.color },
              lineStyle: {
                color: this.color
              },
              tooltip: {
                lineHeight: 16,
                fontSize: 16,
                formatter: `{b}   {c} ${this.unit}`
              },
              itemStyle: {
                color: this.color
              }
            }
          ]
        }
      }
    },
    mounted() {
      this.initData()
    },
    watch: {
      dataSource: {
        immediate: true,
        handler(dataSource) {
          let xAxis = []
          let yAxis = []
          dataSource.forEach(item => {
            xAxis.push(item.x)
            yAxis.push(item.y)
          })
          this.option.xAxis.data = xAxis
          this.option.series[0].data = yAxis
          this.updateOption()
        }
      }
    },
    methods: {
      updateOption() {
        if (this.myChart) {
          // 不重绘
          // this.myChart.clear()
          this.myChart.setOption(this.option, true)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
